<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <!-- 第一个card -->
          <Detail title="总销售额" count="¥ 126560">
<!--            作用域插槽-->
            <template slot="charts">
              <span>周同比 56.67%<svg t="1661417913902" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3268" width="10" height="10"><path d="M426.752 344.149333v554.666667c0 23.68 19.285333 42.666667 43.093333 42.666667h84.48a42.666667 42.666667 0 0 0 43.093334-42.666667v-554.666667h84.949333c47.232 0 62.805333-30.549333 34.56-68.266666l-153.642667-204.8c-28.501333-37.973333-74.112-37.717333-102.4 0l-153.6 204.8c-28.501333 37.973333-12.8 68.266667 34.517334 68.266666h84.949333z" fill="#3D3D3D" p-id="3269"></path></svg></span>
              <span>日同比 19.96%<svg t="1661418003762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3549" width="10" height="10"><path d="M512 921.6C285.77792 921.6 102.4 738.22208 102.4 512S285.77792 102.4 512 102.4s409.6 183.37792 409.6 409.6-183.37792 409.6-409.6 409.6z m0-81.92c180.98176 0 327.68-146.69824 327.68-327.68S692.98176 184.32 512 184.32 184.32 331.01824 184.32 512s146.69824 327.68 327.68 327.68z" fill="#000000" p-id="3550"></path><path d="M482.73408 403.02592a40.96 40.96 0 0 1 59.71968-1.90464l144.81408 144.7936a40.96 40.96 0 1 1-57.91744 57.9584l-115.79392-115.8144-115.95776 115.95776a40.96 40.96 0 0 1-57.91744-57.93792l143.0528-143.0528z" fill="#000000" p-id="3551"></path></svg>
              </span>
            </template>
            <template slot="footer">日销售额</template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <!-- 第二个card -->
          <Detail title="访问量" count="88460">
            <template slot="charts" >
                <lineCharts></lineCharts>
            </template>
            <template slot="footer">日访问量</template>

          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <!-- 第三个card -->
          <Detail title="支付笔数" count="88460">
            <template slot="charts">
              <barCharts></barCharts>
            </template>
            <template slot="footer">转换率</template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <!-- 第四个card -->
          <Detail title="运营活动效果" count="78%">
            <template slot="charts">
              <progressCharts></progressCharts>
            </template>
            <template slot="footer">
              <span>周同比 56.67%<svg t="1661417913902" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3268" width="10" height="10"><path d="M426.752 344.149333v554.666667c0 23.68 19.285333 42.666667 43.093333 42.666667h84.48a42.666667 42.666667 0 0 0 43.093334-42.666667v-554.666667h84.949333c47.232 0 62.805333-30.549333 34.56-68.266666l-153.642667-204.8c-28.501333-37.973333-74.112-37.717333-102.4 0l-153.6 204.8c-28.501333 37.973333-12.8 68.266667 34.517334 68.266666h84.949333z" fill="#3D3D3D" p-id="3269"></path></svg></span>
              <span>日同比 19.96%<svg t="1661418003762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3549" width="10" height="10"><path d="M512 921.6C285.77792 921.6 102.4 738.22208 102.4 512S285.77792 102.4 512 102.4s409.6 183.37792 409.6 409.6-183.37792 409.6-409.6 409.6z m0-81.92c180.98176 0 327.68-146.69824 327.68-327.68S692.98176 184.32 512 184.32 184.32 331.01824 184.32 512s146.69824 327.68 327.68 327.68z" fill="#000000" p-id="3550"></path><path d="M482.73408 403.02592a40.96 40.96 0 0 1 59.71968-1.90464l144.81408 144.7936a40.96 40.96 0 1 1-57.91744 57.9584l-115.79392-115.8144-115.95776 115.95776a40.96 40.96 0 0 1-57.91744-57.93792l143.0528-143.0528z" fill="#000000" p-id="3551"></path></svg>
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import lineCharts from './lineChart'
import barCharts from '@/views/dashboard/Card/barCharts';
import progressCharts from '@/views/dashboard/Card/progressCharts';

export default {
  name: '',
  components: {
    Detail,
    lineCharts,
    barCharts,
    progressCharts
  }
}
</script>

<style scoped>

</style>
